<template>
 <div>
   <el-row>
     <el-col :span="24">
        <div class="header">
         <label for="assistant" style="font-size:20px;font-weight: 600; line-height: 40px;margin-right:5px">已导入辅导员信息</label>
       </div>
       <div style="width:90px;float: right;margin-left:15px;">
         <el-button type="danger" icon="el-icon-delete" @click="confirmDelete(multipleSelection)">注销</el-button>
       </div>
       <div class="header" style="width:120px;float: right;">
         <el-button type="primary" icon="el-icon-search" @click="dialogFormVisible = true">高级搜索</el-button>
         <el-dialog title="搜索" :visible.sync="dialogFormVisible" width="19%">
            <el-form :model="form">
              <el-form-item >
                <!-- <div style=" border-width:1px 0px;padding: 10px 0px 5px 0px;">
                <el-input v-model="form.sch_name" auto-complete="off" placeholder="请输入学校名称" v-if="userInfo.username==='jiaoyuting'"></el-input>
                </div> -->
              <div style="border-width:1px 0px;padding: 10px 0px 5px 0px;">
                <el-select v-if="userInfo.username ==='jiaoyuting'" v-model="form.sch_name" placeholder="选择或输入学校" filterable  clearable style="width: 100%;"> 
                  <el-option
                    v-for="item in schools"
                    :key="item.value"
                    :label="item.sch_name"
                    :value="item.sch_name">
                  </el-option>
                 </el-select> 
               </div>  
                <div style=" border-width:1px 0px;padding: 10px 0px 5px 0px;">
                  <el-select v-model="form.sex" clearable placeholder="选择性别" style="width: 100%;">
                  <el-option
                    v-for="item in option1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>          
                </div >
                <div style=" border-width:1px 0px;padding: 10px 0px 5px 0px;">
                <el-input v-model="form.name" auto-complete="off" placeholder="请输入姓名"></el-input>
                </div>
                <div style=" border-width:1px 0px;padding: 10px 0px 5px 0px;">
                <el-input v-model="form.idcard" auto-complete="off" placeholder="请输入身份证号"></el-input>
                </div>
              </el-form-item>
            </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible=false;getTableData();getSearchData()" :loading="isLoading" >确 定</el-button>
        </div>
        </el-dialog>
       </div>
     </el-col>
   </el-row>
   <el-row style="border-top: 1px solid black; margin-top: 15px">
      <el-table
        v-if="userInfo.level === 3 || userInfo.level === 9 "
        v-loading="loading"
        :data="tableData"
        style="width: 100%;margin-bottom: 10px"
        @selection-change="handleSelectionChange"
        :row-style="showSex">
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="id"
          width="90">
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="name"
          width="140">
        </el-table-column>
        <el-table-column
          label="性别"
          prop="sex"
          width="100">
        </el-table-column>
        <el-table-column
          label="工作单位"
          prop="sch"
          width="240">
        </el-table-column>
        <el-table-column
          label="行政职务"
          prop="preoccupation"
          width="140">
        </el-table-column>
        <el-table-column
          label="任职时间"
          prop="majortime"
          width="190">
        </el-table-column>
        <el-table-column
          label="最高学历"
          prop="edu"
          width="152">
        </el-table-column>
        <el-table-column
          label="办公电话"
          prop="office"
          width="200">
        </el-table-column>
        <el-table-column
          label="邮箱"
          prop="email"
          width="236">
        </el-table-column>
        <el-table-column label="状态" prop="status,submit,status1" width="120">
          <template scope="scope" >
            <el-tag type="warning" v-if="scope.row.submit === 1 && scope.row.status1 === 1 && scope.row.status === 1" close-transition width="80">未提交</el-tag>
            <el-tag type="warning" v-if="scope.row.submit === 1 && scope.row.status1 === 4 && scope.row.status === 1" close-transition width="80">未提交</el-tag>
            <el-tag type="warning" v-if="scope.row.submit === 1 && scope.row.status1 === 1 && scope.row.status === 4" close-transition width="80">未提交</el-tag>
            <el-tag type="warning" v-if="scope.row.status1 === 1 && scope.row.submit === 2 && scope.row.status == 1" close-transition width="80">学校未审</el-tag>
            <el-tag type="warning" v-if="scope.row.status1 === 1 && scope.row.submit === 2 && scope.row.status == 4" close-transition width="80">学校未审</el-tag>
            <el-tag type="danger" v-if="scope.row.status1 === 1 && scope.row.submit === 2 && scope.row.status == 3" close-transition width="80">学校驳回</el-tag>
            <el-tag type="warning" v-if="scope.row.status1 === 1&& scope.row.status === 2 && scope.row.submit === 2" close-transition width="80">教育厅未审</el-tag>
            <el-tag type="warning" v-if="scope.row.status1 === 4&& scope.row.status === 2 && scope.row.submit === 2" close-transition width="80">教育厅未审</el-tag>
            <el-tag type="danger" v-if="scope.row.status1 === 3 && scope.row.status === 2 && scope.row.submit === 2" close-transition width="80">教育厅驳回</el-tag>
            <el-tag type="success" v-if="scope.row.status1 === 2 && scope.row.status === 2 && scope.row.submit === 2" close-transition width="80">教育厅已审</el-tag>
          </template>
        </el-table-column>
        <el-table-column
        label="操作"
        width="130">
        <template slot-scope="scope">
          <!-- name的值是配置路由文件对某界面的命名name，接受值this.$router.params.id -->
          <router-link :to="{name: 'personmsg',
                            params: {id: scope.row.id,
                                     last: '3',
                                     searchCheck: searchCheck
                                    }
                            }" 
                            class="btn-link edit-btn el-icon-edit">
          查看详情
          </router-link>
        </template>
      </el-table-column>
      </el-table>
      <el-table
        v-if="userInfo.level === 2"
        v-loading="loading"
        :data="tableData"
        style="width: 100%;margin-bottom: 10px"
        @selection-change="handleSelectionChange"
        :row-style="showSex">
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="id"
          width="90">
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="name"
          width="120">
        </el-table-column>
        <el-table-column
          label="性别"
          prop="sex"
          width="100">
        </el-table-column>
        <el-table-column
          label="工作单位"
          prop="sch"
          width="200">
        </el-table-column>
        <el-table-column
          label="行政职务"
          prop="preoccupation"
          width="140">
        </el-table-column>
        <el-table-column
          label="任职时间"
          prop="majortime"
          width="160">
        </el-table-column>
        <el-table-column
          label="最高学历"
          prop="edu"
          width="152">
        </el-table-column>
        <el-table-column
          label="办公电话"
          prop="office"
          width="200">
        </el-table-column>
        <el-table-column
          label="邮箱"
          prop="email"
          width="206">
        </el-table-column>
        <el-table-column label="省级审核" prop="status1" width="120">
          <template scope="scope" >
            <el-tag type="warning" v-if="scope.row.status1 === 1" close-transition width="80">未审</el-tag>
            <el-tag type="success" v-if="scope.row.status1 === 2" close-transition>通过</el-tag>
            <el-tag type="danger" v-if="scope.row.status1 === 3" close-transition width="80">驳回</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column
        label="操作"
        width="130">
        <template slot-scope="scope" >
          <!-- name的值是配置路由文件对某界面的命名name，接受值this.$router.params.id -->
          <router-link :to="{name: 'personmsg',
                            params: {id: scope.row.id,
                                     last: '3',
                                     searchCheck: searchCheck,
                                     test: test
                                    }
                            }" 
                            class="btn-link edit-btn el-icon-edit">
          查看详情 
          </router-link>
        </template>
      </el-table-column>
      </el-table>
      
   </el-row>
   <el-pagination
    v-show="allPage>1"
    layout="prev, pager, next"
    :page-count="allPage"
    :current-page="nowPage"
    @current-change="goPage" 
    class="pull-right" background>
  </el-pagination>
 </div>
</template>

<script>
import http from '../../../../src/assets/js/http'
export default {
  data () {
    return {
      allPage: 1,
      nowPage: 1,
      tableData: [],
      option1: [{
        value: '1',
        label: '男'
      },{
        value: '2',
        label: '女'
      }],
      form: {
        sch: '',
        sch_name: '',
        name: '',
        idcard: '',
        sex: ''
      },
      dialogFormVisible: false,
      multipleSelection: [],
      selectId: [],
      userInfo: Lockr.get('userInfo'),
      schools: Lockr.get('schInfo'),
      loading: true,
      searchCheck: {},
      test: [{ check: 2 }, { id: 1 }]
    }
  },
  methods: {
    init() {
      // console.log(this.userInfo)
      // console.log(typeof(this.userInfo.level))
      this.getTableData()
    },
    // 保存搜索数据
    getSearchData() {
      // console.log(userInfo);
      this.searchCheck = {
        
        sch: this.userInfo.sch,
        sex: this.form.sex,
        name: this.form.name,
        idnumber: this.form.idcard,
        sch_name: this.form.sch_name,
      }
    },
    //获取数据填充表格
    getTableData() {
      // _g.openGlobalLoading()
      console.log(this.$route.params.searchCheck)
      if(this.$route.params.searchCheck === undefined) {
        var data = {
          page:this.nowPage,
          sch: this.userInfo.sch,
          sex: this.form.sex,
          name: this.form.name,
          idnumber: this.form.idcard,
          sch_name: this.form.sch_name,
          level_1: this.userInfo.level_1  //未定
        }
      } else {
        var data = {
          page:this.nowPage,
          sch: this.userInfo.sch,
          sex: this.$route.params.searchCheck.sex,
          name: this.$route.params.searchCheck.name,
          idnumber: this.$route.params.searchCheck.idnumber,
          sch_name: this.$route.params.searchCheck.sch_name,
          level_1: this.userInfo.level_1 //未定
        }
        // 类似于form给form，使搜索条件框的条件及时更新
        this.form = this.$route.params.searchCheck
        // this.$route.params.searchCheck = this.form
        // console.log(this.$route.params.searchCheck)
      }
      console.log(data)
      this.apiPost('admin/Train/TeacherChecksearch', data).then((res) => {
        this.handelResponse(res, (data) => {
          console.log(res)
          this.tableData = []
          data.data.forEach((element) => {
            if(element.sex === 1) {
              element.sex = "男"
            } else if (element.sex === 2) {
              element.sex = "女"
            }
            this.tableData.push({
              id: element.id,
              name: element.name,
              sex: element.sex,
              sch: Lockr.get('schInfo')['sch_id_'+element.sch].sch_name,
              preoccupation: element.preoccupation,
              majortime: element.majortime,
              edu: element.edu,
              email: element.email,
              office: element.office,
              status1: element.status1,
              submit: element.submit,
              status: element.status
            })
          })
          this.allPage = data.last_page
          // _g.closeGlobalLoading()
          this.loading = false
        })
      })
    },
    // 点击单行触发事件查看辅导员单个详细信息
    openDetails(row) {
      console.log(row)
      this.$router.push({
        path: '../user/input',
        query: {
          id: row.id
        }
      })
    },
    // 添加行样式
    showSex() {
      // return { 'background-color': '#f0f9eb'}
    },
    // 复选框信息
    handleSelectionChange(val) {
      this.multipleSelection = val
    }, 
    // 注销离职辅导员
    confirmDelete(row) {
      if(row.length >= 1) {
        this.$confirm('确认删除选中辅导员信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _g.openGlobalLoading()
        let ids = []
        console.log(row)
        for(let i = row.length-1; i >= 0; i --) {
          ids[i] = row[i].id
        }
        let data = {
          id: ids
        }
        console.log(data)
        // 删除按钮接口
        this.apiPost('admin/Train/TeacherDelete', data).then((res) => {
          _g.closeGlobalLoading()
          this.handelResponse(res, (data) => {
            _g.toastMsg('success', '删除成功')
            if (row.length === 1 && this.nowPage !== 1) {
              this.nowPage = this.nowPage - 1
              this.goPage(this.nowPage)
            } else {
              this.goPage(this.nowPage)
            }
          })
        })
      }).catch(() => {
        // handle error
        })
      } else {
          _g.toastMsg('warning', '请至少选择一项！')
      }
    },
    // 根据页面渲染数据
    goPage(num) {
      this.nowPage = num
      this.getTableData()
    },
   
  },
  created() {
    _g.closeGlobalLoading()
    this.init()
  },
  mounted() {
    // 给回车键添加触发事件
    // window.addEventListener('keyup', (e) => {
    //   if(e.keyCode === 13) {
    //     this.getTableData()
    //     this.dialogFormVisible=false
    //   }
    // })
  },
  computed: {
  },
  components: {
  },
  mixins: [http]
}

</script>
<style scoped>
  .header {
     float: left;
     margin-left: 10px;
  }
  .button {
    margin-left: 15px;
    margin-top: -5px;
  }
  .searchInfo {
    background-color: #2980D9;
  }
</style>
